<template>
  <div>
    <el-dialog v-if="showClients" :title="formData.id?'编辑客户':'添加客户'" :visible="showClients" @close="cancelFn">
      <!-- 表单 -->
      <el-form ref="formData" label-width="120px" :model="formData" :rules="rules">
        <el-form-item label="经纪" prop="agent">
          <el-select v-model="formData.agent">
            <el-option v-for="item in agentsList" :key="item.id" :label="item.name" :value="item.id">
              {{ item.name }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formData.name" style="width:50%" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email" style="width:50%" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="formData.phone" style="width:50%" placeholder="请输入电话" />
        </el-form-item>
        <el-form-item label="微信" prop="wechat">
          <el-input v-model="formData.wechat" style="width:50%" placeholder="请输入微信号" />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input v-model="formData.desc" type="textarea" style="width:50%" placeholder="请输入描述" />
        </el-form-item>
        <!-- <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card">
                    <i class="el-icon-plus"></i>
                </el-upload> -->
        <ImageUpload ref="ImageUpload" />
      </el-form>

      <!-- footer插槽 -->
      <template v-slot:footer>
        <el-row type="flex" justify="center">
          <el-col :span="6">
            <el-button size="small" @click="cancelFn">取消</el-button>
            <el-button type="primary" size="small" @click="confirmFn">确定</el-button>
          </el-col>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { addClients, editClients, getClientsInfo } from '@/api/clients.js'
import { agentsList } from '@/api/agents.js'
export default {
  props: {
    showClients: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        agent: '',
        name: '',
        email: '',
        phone: '',
        wechat: '',
        desc: '',
        image: ''
      },
      agentsList: [],
      // id:null,
      rules: {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '电话不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
        wechat: [
          { required: true, message: '微信不能为空', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '描述不能为空', trigger: 'blur' }
          // { min: 5, max: 100, message: '描述只能5到100字符', trigger: 'blur' },
        ]
      }
    }
  },
  async created() {
    // 获取经纪信息接口
    this.agentsList = await agentsList()
    // console.log(93,this.agentsList);
  },
  methods: {
    // 新增客户弹窗 确认按钮
    async confirmFn() {
      try {
        // 表单验证
        await this.$refs.formData.validate()
        if (this.formData.id) {
          // console.log(100, this.formData);
          // 编辑
          // 获取到上传图片的信息 里面有我要的url图片地址
          const file = this.$refs.ImageUpload.fileList[0]
          // console.log(100,file);
          const url = file.url
          // 判断图片没有上传完成 不等于success 就不允许保存信息
          if (file && file.status !== 'success') {
            return this.$message.warning('照片未上传完成，请等待！')
          }
          await editClients({
            ...this.formData, image: url || ''
          })
          // console.log(this.formData)
        } else {
          // 新增
          // 获取到上传图片的信息 里面有我要的url图片地址
          const file = this.$refs.ImageUpload.fileList[0]
          // console.log(100,file);
          const url = file.url
          // console.log(102,url);
          // 调用新增接口函数  要把图片路径也传递过去
          await addClients({
            ...this.formData, image: url
          })
        }
      } catch (error) {
        console.log(error)
      }
      // 关闭弹窗
      this.cancelFn()
      // 告诉父组建刷新列表数据
      this.$emit('update')
    },
    // 关闭弹窗
    cancelFn() {
      // 清空数据
      this.formData = {
        agent: '', // 经纪
        name: '', // 姓名
        email: '', // 邮箱
        phone: '', // 电话
        wechat: '', // 微信
        desc: '', // 描述
        image: '' // 图片
      }
      // 清空表单校验规则
      // this.$refs.formData.resetField()
      // 子传父 关闭弹窗
      this.$emit('update:showClients', false)
    },
    // 根据id 获取客户详情信息
    async getClientsInfo(id) {
      // console.log(113, id);
      // 调用获取 客户详情信息的接口函数
      const res = await getClientsInfo(id)
      console.log(115,res);
      // 保存数据
      this.formData = res
      this.formData.agent = res.agent.name
      console.log(this.formData)
      // console.log(139,this.formData);
      // 客户照片的回显
      this.$refs.ImageUpload.fileList.push({
        url: this.formData.image
      })
    }

  }
}
</script>
<style >

</style>
